<template>
    <div id="messageEdit">
        <div class="top">
            <div class="item">
                <span>编号：</span>
                <Input placeholder="编号" style="width: 300px" disabled  v-model="info.id" />
            </div>

            <div class="item">
                <span>留言人：</span>
                <Input placeholder="留言人：" style="width: 300px" disabled  v-model="info.leaveName"/>
            </div>
              <div class="item">
                <span>地址：</span>
                <Input placeholder="地址：" style="width: 300px" disabled  v-model="info.leaveAddress"/>
            </div>
            <div class="item">
                <span>留言时间：</span>
                <Input placeholder="留言时间：" style="width: 300px" disabled  v-model="info.leaveTime"/>
            </div>
             <div class="item">
                <span>留言内容：</span>
                <Input type="textarea" :rows="4" style="width: 300px"  disabled  v-model="info.leaveText" />
            </div>
            <div class="item">
                <span>回复留言：</span>
                <Input type="textarea" :rows="4" style="width: 300px"   v-model="info.reply" />
            </div>
            <div class="item">
               <Button type="primary"  style="width: 150px;margin-left:93px ;" @click="save_info">确定</Button>
                <Button type="warning" style="width: 150px;margin-left:5px ;" @click = "back">返回</Button>
            </div>

        </div>
    </div>
</template>

<script>
//组件详情页面
import {details} from '@/network/allMessage/message'
import {updateMessage} from '@/network/allMessage/message'

export default {
    name:'messageEdit',
    data(){
        return{
            info:''
        }
    },
    methods:{
        back(){
            this.$router.go(-1);//返回上一层
        },
        save_info(){
            let nowData = {
                operation_type:'updateInfo',
                id:'',
                reply:''
            }
            nowData.id = this.info.id
            nowData.reply = this.info.reply
            updateMessage(nowData).then( res => {
                //console.log(res)
                this.$Message.success('修改成功');
            }).catch(err => {
                console.log(err)
            })

        }
    },
    created(){
        //this.$route.params.id接收传来的值
        
        if (typeof(Storage) !== "undefined") {
            //储存数据
            if(typeof(sessionStorage.getItem("id")) == "undefined"){
                //第一次进入
                sessionStorage.setItem("id",this.$route.params.id)
            }else{
                if(typeof(this.$route.params.id) !== "undefined"){
                    //如果是进入一个新的会保存上一次的id（但不是刷新）
                    sessionStorage.setItem("id",this.$route.params.id)
                }
            }
        }
        //sessionStorage.getItem("id")读取数据

        //刷新页面直接取数据sessionStorage.getItem("id")
        details(sessionStorage.getItem("id")).then( res => {
            this.info = res.data.result[0]
            //console.log(res)
        }).catch( err => {
            console.log(err)
        })
    }
}
</script>

<style lang="scss" scoped>
.item{
    margin: 10px 0;
    span{
        display: inline-block;
        width: 100px;
        font-size: 14px;
        font-weight: bold;
    }
    img{
        width: 300px;
        height: 100px;
        display: inline-block;
    }
}
</style>